<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-11-17 11:22:42
 * @LastEditors: charles
 * @LastEditTime: 2021-11-17 12:07:42
-->
<template>
  <div>
    <h2>文章管理</h2>
    <div>
      <button @click="addHandler">增加</button>
    </div>
    num: {{num}} <br>
    num_cp: {{num_cp}}
    <div>
      {{params}}
    </div>
    <div id="container" ref="root"></div>
  </div>
</template>
<script>
import {ref,onMounted,watch,computed} from 'vue'
export default {
  setup() {
    const root = ref(null)
    const num = ref(0);
    const params = ref({page:1,pageSize:10})

    const addHandler = ()=>{
      num.value = num.value+1;
      params.value.page = params.value.page+1;
    }
    let num_cp = computed(()=>{
      return num.value+1
    })

    watch(num,(n,p)=>{
      console.log('新值:',n);
      console.log('旧值:',p);
    })
   
    onMounted(()=>{
      console.log(root.value)
    })
    

    return {
      params,
      root,
      num,
      num_cp,
      addHandler
    }
  },
}
</script>
<style lang="scss" scoped>
#container {
  height:100px;
  background-color:lightblue
}
</style>